<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>首页</title>
    <link rel="stylesheet" href="/admin/css/bootstrap.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1658828_vud4w73neg.css">
    <link rel="stylesheet" href="/admin/css/style.css">
</head>

<body class="bg-light">
    <%- include('../header.html') -%>

        <div class="container-fluid vh-100">
            <div class="row h-100">
                <%- include('../navs.html') -%>
                    <div class="col-10">
                        <div class="p-3 border mb-3 bg-white">
                            <h4 class="mb-0">文章管理</h4>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <div class="card">
                                    <div class="card-header bg-primary text-white d-flex justify-content-between">
                                        <h6 class="mb-0 align-self-center">编辑文章</h6>
                                    </div>
                                    <div class="card-body">
                                        <form action="/admin/article/edit" method="POST" enctype="multipart/form-data">
                                            <input type="hidden" name="id" value="<%=article.id%>">
                                            <div class="form-row">
                                                <label for="title" class="col-2 text-center col-form-label">标题：</label>
                                                <input type="text" class="col-8 form-control" name="title" id="title"
                                                    value="<%= article.title %>" required>
                                                <span class="col-2 col-form-label text-danger">* 必填项</span>
                                            </div>
                                            <div class="form-row mt-3">
                                                <label for="category_id"
                                                    class="col-2 text-center col-form-label">类目：</label>
                                                <select name="category_id" id="category_id" class="col-8 form-control">
                                                    <option value="0">请选择</option>
                                                    <% categories.forEach(category=> { %>
                                                        <option value="<%=category.id%>"
                                                            <%=category.id==article.category_id ? 'selected' : '' %>>
                                                            <%=category.name%>
                                                        </option>
                                                        <% }) %>
                                                </select>
                                                <span class="col-2 col-form-label text-danger">* 必填项</span>
                                            </div>
                                            <div class="form-row mt-3">
                                                <label for="ue_content"
                                                    class="col-2 text-center col-form-label">内容：</label>
                                                <div class="col-8 p-0">
                                                    <textarea id="editor" name="content"><%=article.content%></textarea>
                                                </div>
                                                <span class="col-2 col-form-label text-danger">* 必填项</span>
                                            </div>
                                            <div class="form-row mt-3">
                                                <label for="content"
                                                    class="col-2 text-center col-form-label">热门：</label>
                                                <div class="col-8 col-form-label">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input" id="hot"
                                                            name='hot' value='1' <%=article.hot==1 ? 'checked' : '' %>>
                                                        <label class="custom-control-label" for="hot"></label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-row mt-3">
                                                <label for="content"
                                                    class="col-2 text-center col-form-label">缩略图：</label>
                                                <div class="col-8">
                                                    <input type="hidden" name="thumbnail"
                                                        value="<%=article.thumbnail%>">
                                                    <input type="file" class="d-none" id="customFile" name="upload"
                                                        accept="image/*">
                                                    <label for="customFile" class="position-relative">
                                                        <img src="<%=article.thumbnail%>"
                                                            data-src="holder.js/200x200?text=点击上传" class="img-thumbnail"
                                                            width="200" height="200">
                                                        <button type="button"
                                                            class="delimg btn btn-danger btn-sm position-absolute"
                                                            title="删除" onclick="delThumbnail()">&times;</button>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-row mt-3">
                                                <div class="offset-2">
                                                    <input type="submit" value="提交" class="btn btn-success">
                                                    <a href="/admin/article/" class="btn btn-danger ml-3">取消</a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

        <script src="/admin/js/jquery.min.js"></script>
        <script src="/admin/js/popper.min.js"></script>
        <script src="/admin/js/bootstrap.min.js"></script>
        <script src="/admin/js/holder.min.js"></script>
        <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.5.12/dist/g2.min.js"></script>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.2/dist/data-set.min.js"></script>
        <script src="https://cdn.ckeditor.com/ckeditor5/17.0.0/classic/ckeditor.js"></script>
        <script src="/admin/js/public.js"></script>
        <script>
            function delThumbnail() {
                $("[name='thumbnail']").val('')
            }
        </script>
</body>

</html>